import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import './AI3DModel.css';
import HumanBodySVG from './HumanBodySVG';

// 身体部位数据
const BODY_PARTS = [
  { name: '头', id: '头', description: '头部是大脑所在的位置，控制全身的活动和思维。' },
  { name: '肩胛骨', id: '肩胛骨', description: '肩胛骨是连接上肢和躯干的重要骨骼，支持肩部活动。' },
  { name: '二头肌', id: '肩胛骨2', description: '二头肌是位于上臂前侧的肌肉，负责手臂弯曲动作。' },
  { name: '胸肌1', id: '胸肌1', description: '胸肌是胸部前侧的大块肌肉，对于推动和挤压动作很重要。' },
  { name: '胸肌2', id: '胸肌2', description: '胸肌的外侧部分，与肩部肌肉相连。' },
  { name: '腹肌1', id: '腹肌1', description: '腹肌上部，帮助保持核心稳定和身体姿势。' },
  { name: '腹肌2', id: '腹肌2', description: '腹肌中部，参与身体弯曲和旋转动作。' },
  { name: '腹肌3', id: '腹肌3', description: '腹肌下部，与髋部肌肉协同工作。' },
  { name: '腹肌4', id: '腹肌4', description: '腹肌最下部，靠近腹股沟区域。' },
  { name: '左腿', id: '大腿1', description: '大腿包含股四头肌和股二头肌，支持行走和站立。' },
  { name: '右腿', id: '右腿1', description: '右侧大腿肌肉和骨骼，负责支撑身体重量和运动。' },
  // 添加更多身体部位，确保id与SVG中的元素ID匹配
  { name: '头部', id: 'path1-35', description: '头部包含大脑，是神经系统的中枢。' },
  { name: '颈部', id: 'path1-50', description: '颈部连接头部和躯干，包含重要的血管和神经。' },
  { name: '左肩', id: 'path1-16', description: '左肩关节连接上臂和躯干，允许手臂多方向活动。' },
  { name: '右肩', id: 'path1-17', description: '右肩关节连接上臂和躯干，允许手臂多方向活动。' },
  { name: '胸部', id: 'path1-86', description: '胸部包含心脏、肺部等重要器官。' },
  { name: '腹部', id: 'path1-226', description: '腹部包含消化系统的大部分器官。' },
  { name: '左臂', id: 'path1-39', description: '左臂由上臂和前臂组成，用于各种精细动作。' },
  { name: '右臂', id: 'path1-9', description: '右臂由上臂和前臂组成，用于各种精细动作。' },
  { name: '左腿', id: 'path1-51', description: '左腿支撑身体重量并使人能够行走和跑步。' },
  { name: '右腿', id: 'path1-270', description: '右腿支撑身体重量并使人能够行走和跑步。' },
  { name: '骨盆', id: 'path1-82', description: '骨盆连接脊柱和下肢，保护下腹部器官。' },
];

// 身体部位在SVG中的大致位置，用于定位标签
const PART_POSITIONS = {
  '头': { left: '50%', top: '15%' },
  '肩胛骨': { left: '60%', top: '30%' },
  '肩胛骨2': { left: '30%', top: '35%' },
  '胸肌1': { left: '40%', top: '28%' },
  '胸肌2': { left: '60%', top: '28%' },
  '腹肌1': { left: '50%', top: '40%' },
  '腹肌2': { left: '50%', top: '45%' },
  '腹肌3': { left: '50%', top: '50%' },
  '腹肌4': { left: '50%', top: '55%' },
  '大腿1': { left: '40%', top: '70%' },
  '右腿1': { left: '60%', top: '70%' },
  // 添加新增部位的位置
  'path1-35': { left: '50%', top: '15%' },
  'path1-50': { left: '50%', top: '20%' },
  'path1-16': { left: '35%', top: '25%' },
  'path1-17': { left: '65%', top: '25%' },
  'path1-86': { left: '50%', top: '30%' },
  'path1-226': { left: '50%', top: '40%' },
  'path1-39': { left: '30%', top: '35%' },
  'path1-9': { left: '70%', top: '35%' },
  'path1-51': { left: '40%', top: '70%' },
  'path1-270': { left: '60%', top: '70%' },
  'path1-82': { left: '50%', top: '60%' },
};

// 系统选择数据
const SYSTEMS = [
  { name: '二头肌', id: 'muscle', active: true },
  { name: '肾', id: 'kidney', active: false },
  { name: '骨', id: 'bone', active: false },
  { name: '心', id: 'heart', active: false },
  { name: '肌肉', id: 'muscle2', active: false },
  { name: '心', id: 'heart2', active: false },
];

const AI3DModel = () => {
  const navigate = useNavigate();
  const [activePartId, setActivePartId] = useState(null);
  const [scale, setScale] = useState(1.0);
  const [activeSystem, setActiveSystem] = useState(SYSTEMS[0].id);
  const svgRef = useRef(null);
  // 添加新状态用于动画
  const [showHighlight, setShowHighlight] = useState(false);

  const minScale = 2;
  const maxScale = 5;
  
  // 处理缩放功能
  const handleZoom = (delta) => {
    // 设置缩放值，限制在最小和最大值之间
    setScale(s => Math.max(minScale, Math.min(maxScale, +(s + delta).toFixed(2))));
  };

  // 处理返回按钮点击事件
  const handleBackClick = () => {
    // 导航回症状输入页面
    navigate('/SymptomInput');
  };

  // 处理部位点击事件
  const handlePartClick = (partId) => {
    // 设置当前活动部位ID
    setActivePartId(partId);
    // 重置动画状态然后触发显示动画
    setShowHighlight(false);
    setTimeout(() => {
      setShowHighlight(true);
    }, 50);
  };

  // 查找当前选中部位的信息
  const getActivePart = () => {
    // 从身体部位数据中查找当前选中的部位
    return BODY_PARTS.find(part => part.id === activePartId);
  };

  // 获取当前选中部位的位置
  const getActivePartPosition = () => {
    // 如果没有选中部位，返回默认位置
    if (!activePartId) return { left: '0%', top: '0%' };
    // 返回选中部位的位置，如果没有定义则使用默认位置
    return PART_POSITIONS[activePartId] || { left: '50%', top: '50%' };
  };

  useEffect(() => {
    // 如果SVG引用不存在，则返回
    if (!svgRef.current) return;
    
    // 遍历所有身体部位，设置其颜色和透明度
    BODY_PARTS.forEach(part => {
      const el = svgRef.current.querySelector(`#${part.id}`);
      if (el) {
        // 设置选中部位的颜色为橙色，未选中的为灰色
        el.setAttribute('fill', activePartId === part.id ? '#f97316' : '#cbd5e1');
        // 设置选中部位的透明度较高，未选中的较低
        el.setAttribute('opacity', activePartId === part.id ? '0.9' : '0.7');
        
        // 添加鼠标悬停效果
        el.onmouseover = () => {
          // 当鼠标悬停在非选中部位上时，改变颜色和透明度
          if (activePartId !== part.id) {
            el.setAttribute('fill', '#e5e7eb');
            el.setAttribute('opacity', '0.8');
          }
        };
        
        // 鼠标离开效果
        el.onmouseout = () => {
          // 当鼠标离开非选中部位时，恢复原来的颜色和透明度
          if (activePartId !== part.id) {
            el.setAttribute('fill', '#cbd5e1');
            el.setAttribute('opacity', '0.7');
          }
        };
      }
    });
  }, [activePartId]); // 当activePartId变化时重新运行此效果

  useEffect(() => {
    // 如果SVG引用不存在，则返回
    if (!svgRef.current) return;
    
    // 存储事件处理器，以便在组件卸载时移除
    const handlers = [];
    
    // 为每个身体部位添加点击事件
    BODY_PARTS.forEach(part => {
      const el = svgRef.current.querySelector(`#${part.id}`);
      if (el) {
        // 创建点击处理函数
        const handler = () => handlePartClick(part.id);
        // 添加点击事件监听器
        el.addEventListener('click', handler);
        // 存储元素和处理函数，以便后续清理
        handlers.push({ el, handler });
      }
    });

    // 清理函数，在组件卸载时移除事件监听器
    return () => {
      handlers.forEach(({ el, handler }) => {
        el.removeEventListener('click', handler);
      });
    };
  }, []); // 仅在组件挂载时运行一次

  // 查找当前活动的部位
  const activePart = getActivePart();
  const activePosition = getActivePartPosition();

  return (
    <div className="model-container">
      {/* 状态栏 */}
      <div className="status-bar">
        <span className="time">9:41</span>
        <div className="icons">
          <span className="signal">●●●</span>
          <span className="wifi">●</span>
          <span className="battery">●</span>
        </div>
      </div>

      <div className="app-layout">
        {/* 顶部导航栏 */}
        <div className="header-bar">
          <button className="back-btn" onClick={handleBackClick}>
            ←
          </button>
          <h1 className="page-title">浏览症状</h1>
          <button className="settings-btn">
            ⚙️
          </button>
        </div>

        {/* 视图选择器 */}
        <div className="view-selector">
          <div className="view-tab active">正视图</div>
          <div className="view-mode">皮肤模式</div>
        </div>

        {/* 模型显示区域 */}
        <div className="model-content">
          <div className="model-wrapper">
            <HumanBodySVG svgRef={svgRef} scale={scale} />
            
            {/* 左侧控制按钮 */}
            <div className="controls left">
              <div className="control-buttons">
                <button className="circle-button">
                  <span role="img" aria-label="用户">👤</span>
                </button>
                <button className="circle-button">
                  <span role="img" aria-label="菜单">↕️</span>
                </button>
                <button className="circle-button">
                  <span role="img" aria-label="文档">📄</span>
                </button>
              </div>
              <button className="circle-button rotate-btn">
                <span role="img" aria-label="旋转">⟳</span>
              </button>
            </div>
            
            {/* 右侧缩放控制 */}
            <div className="controls right">
              <button className="circle-button zoom-btn" onClick={() => handleZoom(0.1)}>
                +
              </button>
              <div className="zoom-slider">
                <div className="slider-track">
                  <div 
                    className="slider-fill" 
                    style={{height: `${((scale - minScale) / (maxScale - minScale)) * 100}%`}}
                  ></div>
                </div>
              </div>
              <button className="circle-button zoom-btn" onClick={() => handleZoom(-0.1)}>
                -
              </button>
            </div>
            
            {/* 选中部位高亮标签 */}
            {activePartId && showHighlight && (
              <div 
                className={`highlight-tag ${showHighlight ? 'show-highlight' : ''}`}
                style={{ 
                  left: activePosition.left, 
                  top: activePosition.top 
                }}
              >
                {activePart?.name}
              </div>
            )}

            {/* 身体部位说明卡片 */}
            {activePartId && (
              <div className="part-info-card">
                <h3>{activePart?.name}</h3>
                <p>{activePart?.description}</p>
              </div>
            )}
          </div>
        </div>

        {/* 底部系统选择器 */}
        <div className="system-selector">
          {SYSTEMS.map(system => (
            <button
              key={system.id}
              className={`system-btn ${system.id === activeSystem ? 'active' : ''}`}
              onClick={() => setActiveSystem(system.id)}
            >
              {system.name}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default AI3DModel; 